<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8"></meta>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"></meta>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"></meta>
    <title>Document</title>
    <style type="text/css">
        .back_ground{
            height:80vh;
            width:80vw;
            overflow: hidden;
            margin:10vh 10vw;
            border: 1px solid #f5f5f5;
            background: url("${backGroundImageUrl}") no-repeat;
            background-size: cover;
        }
        .product_name{
            width:500px;
            height:80px;
            float: right;
            position:relative;
            right: -110px;
            background:#036194 ;
            transform: rotate(45deg);
        }
        .font_title{
            font-size: 55px;
            font-family: "";
            color: orange;
            float: right;
            margin-right: 86px;
        }
        .logo{
            margin-left: 40px;
            margin-top: 20px;
            width: 90px;
            height: 90px;
        }
        .font_text_back_ground{
            font-family: "Microsoft YaHei UI";
            font-size: 25px;
            color: white;
            margin-top: 110px;
            margin-left: 70px;
        }
        .font_text_left{
            margin: 0 auto;
            display: inline-block;
            text-align: right;
            width: 205px;
        }
        .font_text_right{
            margin: 0 auto;
            display: inline-block;
        }
        .mark{
            height: 60px;
            margin-left: -70px;
            margin-top: 300px;
            background-image: linear-gradient(to right,#036194,transparent);
            padding-top: 30px;
            padding-left: 25px;
            color: whitesmoke;
        }


    </style>
</head>

<body>
<div class="back_ground">
    <!-- 标题 -->
    <div class="product_name">
        <div class="font_title">优质保</div>
    </div>
    <!-- logo -->
    <img src="${logoImageUrl}" class="logo"></img>

    <!-- 文本 -->
    <div class="font_text_back_ground">
        <div>
            <div class="font_text_left">凭证ssss编号</div>:
            <div class="font_text_right">ssfdsfsdfsdfsdf</div>
        </div>
        <div>
            <div class="font_text_left">凭证sssssssss编号</div>:
            <div class="font_text_right">ssfdsfsdfsdfsdf</div>
        </div>

    <!-- 注释 -->
    <div class="mark">
        注释：该车享受"优车质保"服务，具体服务事项请详细阅读服务条款。
    </div>

    </div>
</div>
</body>

</html>